import { Skeleton, Card, Row, Col } from 'antd';
import React from 'react';
import './index.css';

const PageSkeleton: React.FC = () => {
  return (
    <div className="skeleton-card">
      {/* 顶部四个卡片的骨架屏 */}
      <Row gutter={24}>
        {[1, 2, 3, 4].map((item) => (
          <Col key={item} xs={24} sm={12} md={12} lg={6} xl={6}>
            <Card style={{ marginBottom: 24 }}>
              <Skeleton active paragraph={{ rows: 3 }} />
            </Card>
          </Col>
        ))}
      </Row>

      {/* 销售趋势图的骨架屏 */}
      <Card style={{ marginBottom: 24 }}>
        <Skeleton.Input style={{ width: '100%', height: 32, marginBottom: 16 }} active />
        <Skeleton.Input style={{ width: '60%', height: 400 }} active />
      </Card>

      {/* 两列布局的骨架屏 */}
      <Row gutter={24}>
        <Col xs={24} sm={24} md={24} lg={12} xl={12}>
          <Card style={{ marginBottom: 24 }}>
            <Skeleton active paragraph={{ rows: 4 }} />
            <Skeleton.Input style={{ width: '100%', height: 200, marginTop: 16 }} active />
          </Card>
        </Col>
        <Col xs={24} sm={24} md={24} lg={12} xl={12}>
          <Card style={{ marginBottom: 24 }}>
            <Skeleton active paragraph={{ rows: 4 }} />
            <Skeleton.Input style={{ width: '100%', height: 200, marginTop: 16 }} active />
          </Card>
        </Col>
      </Row>

      {/* 底部表格的骨架屏 */}
      <Card>
        <Skeleton.Input style={{ width: '100%', height: 32, marginBottom: 16 }} active />
        <Skeleton active paragraph={{ rows: 6 }} />
      </Card>
    </div>
  );
};

export default PageSkeleton; 